<template>
    <div class="text__card">

        <div class="card__name">
            {{ props.name }}
       </div>

        <div>
            <el-input
            v-model="text"
            placeholder="请输入"
            @change="handleChange"
            />
        </div>

        
    </div>
</template>
           
<script setup>
    import { ref, onMounted, defineEmits, defineProps } from "vue"

    const text = ref('')

    const emit = defineEmits(['change_field'])
    const props = defineProps({
        name: {
            type: String,
            default: '请输入描述'
        },
        index: {
            type: Number,
            default: -1,
        }
    })

    const handleChange = (value)=>{
        // console.log(value)
        emit('change_field', value, props.index)
    }
    
    onMounted(()=>{
    
    })
    
</script>
<style scoped lang="scss">
    .text__card{
        width: 100%;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .card__name{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            // border-bottom: 1px solid #fff;
            font-weight: 600;
        }
    }
</style>
